<template>
<view class="index">
	<view class="jtop">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="jtop_l" @tap="navigateBack"><image src="../../static/img/ic_back_white.png"></image></view>
		<!-- <view class="jtop_l" @tap="navigateBack">关闭</view> -->
		<view class="jtop_c">
			<view>
				财务
			</view>
		</view>
		<view class="jtop_r" @tap="jshow_pop"><image src="../../static/img/ic_ellipsis_white.png"></image></view>
	</view>
	
	<view class="tophr"></view>
	
	<view class="lbj"></view>
	
<!-- 	<view class="fa01">
		<view class="fa01_b" @tap="fi_indate">
			<text class="fa01_bt">{{data_one?data_one:'0.00'}}</text>
			<text class="fa01_bc">总收入(元)</text>
			<view class="fa01_bf"><text>查看详情</text><image src="../../static/img/index/new/w.png"></image></view>
		</view>
		<view class="fa01_b" @tap="fi_outdate">
			<text class="fa01_bt fa01_bt2">{{data_two?data_two:'0.00'}}</text>
			<text class="fa01_bc">总支出(元)</text>
			<view class="fa01_bf"><text>查看详情</text><image src="../../static/img/index/new/w.png"></image></view>
		</view>
	</view> -->
	
	<view class="fab fa011"  @tap="fi_indate">
		<view class="fa_t">
			<view class="fa_tl fa_tl22"></view>
			<view class="fa_tt">
				项目收入
			</view>
			<view class="fa_tn">
				查看详情
				<image src="../../static/img/index/5/xx5.png"></image>
			</view>
		</view>
		<view class="ffn">
			<view class="ffn_top">
				<view class="ffn_topb">
					<view class="ffn_topb1">
						{{totalAmount?totalAmount:'0.00'}}
					</view>
					<view class="ffn_topb2">
						应收收入(元)
					</view>
				</view>
				<view class="ffn_topc"></view>
				<view class="ffn_topb">
					<view class="ffn_topb1 ffn_topb11">
						{{payedAmount?payedAmount:'0.00'}}
					</view>
					<view class="ffn_topb2">
						实际收入(元)
					</view>
				</view>
			</view>
		
			<view class="ffn_foot">
				<view class="ffn_foot1">
					当前未到账(元)：
				</view>
				<view class="ffn_foot2">
					{{totalAmount&&payedAmount?totalAmount-payedAmount:'0.00'}}
				</view>
			</view>
		
		</view>
		
	</view>
	
	<view class="fab"  @tap="fi_outdate">
		<view class="fa_t">
			<view class="fa_tl fa_tl222"></view>
			<view class="fa_tt">
				项目支出
			</view>
			<view class="fa_tn">
				查看详情
				<image src="../../static/img/index/5/xx5.png"></image>
			</view>
		</view>
		<view class="ffn">
			<view class="ffn_top">
				<view class="ffn_topb">
					<view class="ffn_topb1 ffn_topb111">
						{{ztotalAmount?ztotalAmount:'0.00'}}
					</view>
					<view class="ffn_topb2">
						应付金额(元)
					</view>
				</view>
				<view class="ffn_topc"></view>
				<view class="ffn_topb">
					<view class="ffn_topb1 ffn_topb11">
						{{zpayedAmount?zpayedAmount:'0.00'}}
					</view>
					<view class="ffn_topb2">
						实付金额(元)
					</view>
				</view>
			</view>
		
			<view class="ffn_foot ffn_foot22">
				<view class="ffn_foot1">
					当前未到账(元)：
				</view>
				<view class="ffn_foot2">
					{{ztotalAmount&&zpayedAmount?ztotalAmount-zpayedAmount:'0.00'}}
				</view>
			</view>
		
		</view>
		
	</view>
	

	
	
	<view class="fab" style="display:none">
		<view class="fa_t">
			<view class="fa_tl"></view>
			<view class="fa_tt">
				近1年材料价格走势
			</view>
			<view class="fa_tr">
				<picker style="float: left;" @change="bindPickerChange" :range-key="'name'" :value="index" :range="array" v-if="array !=''">
					<text>{{array[index].name}}</text>
				</picker>
									
				<!-- <text>混凝土</text> -->
				<image src="../../static/img/index/new/xl.png"></image>
			</view>
		</view>
		
		<view class="tb">
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts_fx" @touchstart="touchLineA"></canvas>
		</view>
		
	</view>
	
	<view class="fab ">
		<view class="fa_t">
			<view class="fa_tl fa_tl2"></view>
			<view class="fa_tt">
				材料成本分析
			</view>
			<view class="fa_tr">
				<picker style="float: left;" @change="bindPickerChange2"  :range-key="'name'" :value="index2" :range="array2" v-if="array2 !=''">
					<text>{{array2[index2].name}}</text>
				</picker>
				<image src="../../static/img/index/new/xl.png"></image>
			</view>
			
		</view>
		
		<view class="fa2_tt">
			<view class="fa2_tk">
				元/m³
			</view>
			<view class="fa2_k">
				<view class="fa2_kb">
					<view class="fa2_kbs"></view>
					<view class="fa2_kbt">去年单价</view>
				</view>
				<view class="fa2_kb">
					<view class="fa2_kbs fa2_kbs02"></view>
					<view class="fa2_kbt">今年单价</view>
				</view>
				
			</view>
		</view>
		
		
		<view class="tb2">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts_zz" @touchstart="touchColumn"></canvas>
		</view>	
	</view>
	
	<view class="fab" style="display:none">
		<view class="fa_t">
			<view class="fa_tl fa_tl2"></view>
			<view class="fa_tt">
				成本占比分析
			</view>
			<!-- <view class="fa_k">
				<view class="fa_kb">
					<view class="fa_kbs"></view>
					<view class="fa_kbt">人工成本</view>
				</view>
				<view class="fa_kb">
					<view class="fa_kbs fa_kbs02"></view>
					<view class="fa_kbt">材料成本</view>
				</view>
				<view class="fa_kb">
					<view class="fa_kbs fa_kbs03"></view>
					<view class="fa_kbt">机械成本</view>
				</view>
			</view> -->
		</view>
		<view class="tb">
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		</view>
	</view>
	


	<!-- 弹出层 -->
	<view :class="[ashowpop ? 'tc' : 'tc hide']">
			<view class="jtop_bj"  @click="jshow_pop"></view>
			
			<view class="tc_fbox">
				<!-- <view class="tc_fbox_bt3" @click="build_e">
					编辑施工日志模板
				</view> -->
				<view class="tc_fbox_bt2" @click="jshow_pop">
					批量导出
				</view>
				<view class="tc_fbox_bt"  @click="jshow_pop">
					取消
				</view>
			</view>
	
		</view>
	
</view>	
</template>

<script>import request from '@/common/request.js'
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaColumn=null;
	var canvaRing=null;
	var canvaLineA=null;
		
	export default {
		data() {
			return {
				repeat_click:true,
				array: [],
				index: 0,
				
				array2: [],
				index2: 0,
							
							
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
				
				cWidth_zz:'',
				cHeight_zz:'',
				
				cWidth_fx:'',
				cHeight_fx:'',


				ashowpop:false,
				
				data_one:"",
				data_two:"",
				id:"",
				
				nodata:true,
				items:[],
				name:"",
				jtitle:"",
				payedAmount:"",
				totalAmount:"",
				zpayedAmount:"",
				ztotalAmount:""
			}
		},
		
		onShow() {

				
				request({
					url: `/biz/finance/income`, 
					method :"GET",
					success: (res) => {
						if (res.data.success == true) {
								this.payedAmount = res.data.data.payedAmount;
								this.totalAmount = res.data.data.totalAmount;	
						}
					}
				});

				request({
					url: `/biz/finance/payout`, 
					method :"GET",
					success: (res) => {
						if (res.data.success == true) {
								this.zpayedAmount = res.data.data.payedAmount;
								this.ztotalAmount = res.data.data.totalAmount;	
						}
					}
				});




				this.data_add();	
				
				this.projectId = uni.getStorageSync("dqfull_name").id;
				
				request({
					url: `/modor/v1/project/${this.projectId}/finance/expenditure/profile`, 
					method :"GET",
					// data:{
					// 	workTypeId:a
					// },
					
					success: (res) => {
						console.log("1项目列表信息",res)
						console.log(res.data.data.length)
						if (res.data.success == true) {
								this.items = res.data.data;
								
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
				
		},
		
		onLoad() {
								_self = this;
								this.cWidth=uni.upx2px(650);
								this.cHeight=uni.upx2px(550);
								
								this.cWidth_zz = uni.upx2px(650);
								this.cHeight_zz = uni.upx2px(400);
								
								this.cWidth_fx = uni.upx2px(650);
								this.cHeight_fx = uni.upx2px(400);
								
								this.getServerData();
											
		},
		methods: {
			
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.index = e.target.value;
						this.sjtb1();
			},
			
			bindPickerChange2: function(e) {
			            console.log('2picker发送选择改变，携带值为', e.target.value)
			            this.index2 = e.target.value
			},
			
			
			sjtb1(a){
				console.log("aaaa11",this.array)
				console.log("aaaa22",this.index)
				
				var tb1_id = this.array[this.index].id;

				request({
					url: `/modor/v1/project/${this.projectId}/finance/material/price/trend`, 
					method :"GET",
					data:{
						baseMaterialId:tb1_id
					},
					
					success: (res) => {
						console.log("tb111111_id信息",res)
						console.log(res.data.data.length)
						if (res.data.success == true) {
							
							let c1 = [];
							let c2 = [{name: '价格',color: '#FF6600',data: []}];
							
							for(var i = 0; i <res.data.data.length;i++ ){
								c1.push(res.data.data[i].month.slice(-2));
								c2[0].data.push(res.data.data[i].avgPrice);
							}
							console.log("tb111111_id信息11",c1)
							
								let LineA={categories:[],series:[]};
								LineA.categories=c1;
								LineA.series=c2;
											
								_self.showLineA("canvasLineA",LineA);
								
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
				
				
			},
			
			
			sjtb2(a){
				var tb2_id = this.array2[this.index2].id;
			
				request({
					url: `/modor/v1/project/${this.projectId}/finance/material/price/trend`, 
					method :"GET",
					data:{
						baseMaterialId:tb2_id
					},
					
					success: (res) => {
						console.log("tb22222_id信息",res)
						console.log(res.data.data.length)
						if (res.data.success == true) {
							
								let Column={categories:[],series:[]};
																			
								Column.categories=["1", "2", "3", "4", "5", "6","7", "8", "9", "10", "11", "12"];
								Column.series= [{
									"name": "去年单价",
									"data": [15, 20, 45, 37, 43, 34,15, 20, 45, 37, 43, 34]
								  }, {
									"name": "今年单价",
									"data": [30, 40, 25, 14, 34, 18,30, 40, 25, 14, 34, 18]
								  }];
								_self.showColumn("canvasColumn",Column);
								
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
				
				
			},
				
			sjtb3(a){
				// var tb2_id = this.array2[this.index2].id;

				request({
					url: `/modor/v1/project/${this.projectId}/finance/cost/statistics`, 
					method :"GET",
					// data:{
					// 	baseMaterialId:tb2_id
					// },
					
					success: (res) => {
						console.log("tb33333_id信息",res)
						console.log(res.data.data.length)
						if (res.data.success == true) {
							
								let Ring={series:[]};
								
								Ring.series=res.data.data;
								  
								  
								_self.showRing("canvasRing",Ring);
								
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
				
				
			},
				
					
			data_add(a){
				
				this.projectId = uni.getStorageSync("dqfull_name").id;

				
				request({
					url: `/modor/v1/project/${this.projectId}/material/in/items`, 
					method :"GET",
					data:{
						type:""
					},
					
					success: (res) => {
						console.log("11111项目列表信息",res)
						console.log(res.data.data.length)
						if (res.data.success == true) {
								this.array = res.data.data;
								this.array2 = res.data.data;
								this.sjtb1();
								this.sjtb3();
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
				
				
				
				// 获取列表信息GET /v1/project/{projectId}/finance/statistics
				request({
					url: `/modor/v1/project/${this.projectId}/finance/statistics`, 
					method :"GET",
					// data:{
					// 	category:a
					// },
					
					success: (res) => {
						console.log("1项目列表信息",res)
						console.log(res.data.data.length)
						if (res.data.success == true) {
								this.data_one = res.data.data.totalAmountTxt;
								this.data_two = res.data.data.payedAmountTxt;
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
					
			},
			
				getServerData(){
						// request({
						// 	url: 'https://www.ucharts.cn/data.json',
						// 	data:{
						// 	},
						// 	success: function(res) {
						// 		console.log(res.data.data)
						// 		let Ring={series:[]};
						// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						// 		Ring.series=res.data.data.Ring.series;
						// 		_self.showRing("canvasRing",Ring);
						// 	},
						// 	fail: () => {
						// 		_self.tips="网络错误，小程序端请检查合法域名";
						// 	},
						// });
						
						
						
						// let Ring={series:[]};
						
						// Ring.series=[{
						// 	"name": "人工成本",
						// 	"data": 5000000,
						// 	"color":"#FFAA20"
						//   }, {
						// 	"name": "材料成本",
						// 	"data": 3000000,
						// 	"color":"#4797FC"
						//   }, {
						// 	"name": "机械成本",
						// 	"data": 8000000,
						// 	"color":"#2DB755"
						//   }];
						  
						  
						// _self.showRing("canvasRing",Ring);
						
						
												//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
												let Column={categories:[],series:[]};
											
												Column.categories=["1", "2", "3", "4", "5", "6","7", "8", "9", "10", "11", "12"];
												Column.series= [{
													"name": "去年单价",
													"data": [15, 20, 45, 37, 43, 34,15, 20, 45, 37, 43, 34]
												  }, {
													"name": "今年单价",
													"data": [30, 40, 25, 14, 34, 18,30, 40, 25, 14, 34, 18]
												  }];
												_self.showColumn("canvasColumn",Column);
												
											
											
											
											
												
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去								
						// let LineA={categories:[],series:[]};
						// LineA.categories=["1", "2", "3", "4", "5", "6","7", "8", "9", "10", "11", "12"];
						// LineA.series=[{
						// 				name: '价格',
						// 				data: [35, 30, 35, 37, 35, 30,35, 30, 35, 37, 33, 34],
						// 				color: '#FF6600'
						// 			}];
									
						// _self.showLineA("canvasLineA",LineA);
				
					},
					
					
					
					showLineA(canvasId,chartData){
									canvaLineA=new uCharts({
										$this:_self,
										canvasId: canvasId,
										type: 'area',
										fontSize:11,
										legend:{show:false},
										dataLabel:false,
										dataPointShape:true,
										background:'#FFFFFF',
										pixelRatio:_self.pixelRatio,
										categories: chartData.categories,
										series: chartData.series,
										animation: true,
										xAxis: {
											// type:'grid',
											// gridColor:'#CCCCCC',
											// gridType:'dash',
											// dashLength:8
											disabled:false,
											disableGrid:true
										},
										yAxis: {
											gridType:'dash',
											gridColor:'#CCCCCC',
											dashLength:8,
											splitNumber:3,
											min:0,
											max:50,
											format:(val)=>{return val.toFixed(0)}
										},
										width: _self.cWidth_fx*_self.pixelRatio,
										height: _self.cHeight_fx*_self.pixelRatio,
										extra: {
											area:{
														type: 'curve',
														opacity:1,
														addLine:true,
														width:2,
														gradient:true
													}
										}
									});
									
								},
								
								touchLineA(e) {
									canvaLineA.showToolTip(e, {
										format: function (item, category) {
											return category + '月 ' + item.name + ':' + item.data 
										}
									});
								},
					
					
					
					
					/////////////////zz
					showColumn(canvasId,chartData){
									canvaColumn=new uCharts({
										padding:[15,0,4,0],
										$this:_self,
										canvasId: canvasId,
										type: 'column',
										legend:{show:false},
										fontSize:11,
										background:'#FFFFFF',
										pixelRatio:_self.pixelRatio,
										animation: true,
										categories: chartData.categories,
										series: chartData.series,
										
										xAxis: {
											// disableGrid:true,
											disabled:false,
											disableGrid:true
										},
										yAxis: {
											disabled:true,
											gridColor:"#DDDDDD",
											gridType:"dash",
											splitNumber:2,
											// position:"center"
										},
										colors:['#B5B5B5', '#256AFF', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
										dataLabel: false,
										width: _self.cWidth_zz*_self.pixelRatio,
										height:_self.cHeight_zz*_self.pixelRatio,
										extra: {
											column: {
												type:'group',
												// width: _self.cWidth_zz*_self.pixelRatio*0.45/chartData.categories.length
												width: 6
											}
										  }
									});
									
								},
								touchColumn(e){
									canvaColumn.showToolTip(e, {
										format: function (item, category) {
											if(typeof item.data === 'object'){
												return category + '月 ' + item.name + ':' + item.data.value 
											}else{
												return category + '月 ' + item.name + ':' + item.data 
											}
										}
									});
								},
								
					////////////zzt
					
					
					
					
					showRing(canvasId,chartData){
						canvaRing=new uCharts({
							$this:_self,
							canvasId: canvasId,
							type: 'ring',
							fontSize:11,
							legend:{
								show:false
							},
							title: {name: '总成本(元)',
								color: '#666666',
								fontSize: 15*_self.pixelRatio,
								offsetY:30*_self.pixelRatio,
								
							},
							subtitle: {
								name: '2,000,000.00',
								color: '#000000',
								fontSize: 20*_self.pixelRatio,
								offsetY:-20*_self.pixelRatio,
								offsetX:15*_self.pixelRatio,
							},
							extra: {
								pie: {
								  offsetAngle:160,
								  ringWidth: 22*_self.pixelRatio,
								  labelWidth:15
								}
							},
							background:'#FFFFFF',
							pixelRatio:_self.pixelRatio,
							series: chartData.series,
							animation: true,
							width: _self.cWidth*_self.pixelRatio,
							height: _self.cHeight*_self.pixelRatio,
							disablePieStroke: true,
							dataLabel: true,
						});
					},
					touchRing(e){
						canvaRing.showToolTip(e, {
							format: function (item) {
								return item.name + ':' + item.data 
							}
						});
					},
			
			
			
			
			
			fi_indate() {
				uni.navigateTo({
					url: '../main/fi_indate',
				});
			},
			fi_outdate() {
				uni.navigateTo({
					url: '../main/fi_outdate',
				});
			},
			// 跳转
			jshow_pop() {
				this.ashowpop = !this.ashowpop;
			},
			build_i() {
				uni.navigateTo({
					url: '../main/build_i',
				});
			},
			build_m() {
				uni.navigateTo({
					url: '../main/build_m',
				});
			},
			build_e() {
				uni.navigateTo({
					url: '../main/build_e',
				});
			},
			// 跳转
			to_add() {
				uni.navigateTo({
					url: '../main/clock_work_m',
				});
			},
		
			navigateBack(){
				uni.navigateBack()
			},
            onDayClick(data){
                this.curDate = data.date;
            }
		}
	}
</script>

<style>
.ffn_top{ width: 100%; height: auto; display: block; float: left;}	
.ffn_topb{ width: 46%; height: auto; display: block; float: left;}	
.ffn_topb1{ width: 100%; height: auto; display: block; float: left;font-size:36rpx; font-weight: 500;
    color: #FF6600;}	
.ffn_topb11{ color: #000000;}
.ffn_topb111{ color: #2DB755;}
.ffn_topb2{ width: 100%; height: auto; display: block; float: left;font-size:28rpx;
    color: #666666; margin: 20rpx 0 0 0;}
.ffn_topc{ width: 1px; height: 72rpx; display: block; float: left;margin:20rpx 5% 0 0;background: #DDDDDD;}
.ffn_foot{height: 72rpx;
width: 100%;
display: block; float: left;margin:40rpx 0 0 0;
background: #FFFBE5;
border: 1px solid #FFE57A;
box-sizing: border-box;
box-shadow: 0px 1rpx 4rpx rgba(0, 0, 0, 0.07);
border-radius: 6rpx;font-size: 28rpx;
line-height: 72rpx;

color: #E6B318;}
.ffn_foot1{ float: left; margin: 0 0 0 18rpx; }

.ffn_foot2{ float: right; margin: 0  18rpx 0 0;font-size: 36rpx;}

.ffn_foot22{background: #F6FFED;
border: 1rpx solid #B7EB8F;color: #92CE63;
}

.fa_tn{ width: auto; height: auto; float: right;margin: 25rpx 0 0 0px;
    display: block;
    font-size: 20rpx;
    color: #3F578C;}
.fa_tl22{ background: #FF6600;}
.fa_tl222{ background: #2DB755 !important;}
.ffn{ width: 640rpx; height: auto; display: block; float: left; margin: 40rpx 30rpx 26rpx;}

.fa_tn image{ width: 20rpx; height: 20rpx; display: block; float: right; margin: 10rpx 10rpx 0 10rpx;}	
.fa2_tt{width: 650rpx; height:auto; display: block; float:left; margin: 30rpx 50rpx 0; position: relative; z-index: 2; background: #ffffff;}
.fa2_tk{width: auto; height: auto; display: block; float: left;font-size: 16rpx; color: #999999;line-height: 20rpx; }
.fa2_k{width: auto;height: auto;margin:0rpx 0 0 0rpx;display: block; float: left; }
.fa2_kb{width: auto; height: auto; display: block; float: left; margin:0rpx 0 0 30rpx;}
.fa2_kb:first-child{width: auto; height: auto; display: block; float: left; margin:0rpx 0 0 150rpx;}
.fa2_kbs{width: 6rpx; height: 6rpx; display: block; float: left; background: #B5B5B5; margin:5rpx 5rpx 0 0 ;}
.fa2_kbt{width: auto; height: auto; display: block; float: left;font-size: 14rpx; color: #999999;line-height: 14rpx; }
.fa2_kbs02{background: #256AFF;}
	
	
.charts_fx{width: 650rpx; height:400rpx;background-color: #FFFFFF; display: block; float:left; position: relative;}
.charts_zz{width: 650rpx; height:400rpx;background-color: #FFFFFF; display: block; float:left; position: relative;}
.charts{width: 650rpx; height:550rpx;background-color: #FFFFFF; display: block; float:left;}
.tb{width: 700rpx;height: auto; display: block; float: left; margin: 24rpx 0 24rpx 24rpx;}
.tb2{width: 700rpx;height: auto; display: block; float: left; margin: 0rpx 0 24rpx 24rpx; position: relative; z-index: 1; 
/* border-left: 1px solid #dddddd; */
}
.fa_k{width: auto;height: auto;margin:22rpx 0 0 0rpx;display: block; float: right; }
.fa_kb{width: auto; height: auto; display: block; float: left; margin:20rpx 0 0 30rpx;}
.fa_kbs{width: 6rpx; height: 6rpx; display: block; float: left; background: #FFAA20; margin:5rpx 5rpx 0 0 ;}
.fa_kbt{width: auto; height: auto; display: block; float: left;font-size: 14rpx; color: #999999;line-height: 14rpx; }
.fa_kbs03{background: #2DB755;}
.fa_kbs02{background: #4797FC;}
	
.fab{width: 702rpx;height: auto; display: block; float: left; margin: 24rpx 0 0 24rpx;background: #FFFFFF;box-shadow: 0px 10rpx 30rpx rgba(0, 0, 0, 0.1);border-radius: 12rpx;}
.fa_t{width: 100%; height: auto; box-sizing: border-box; padding: 0rpx 20rpx 0 0; display: block; float: left;}
.fa_tl{ width: 6rpx; height: 28rpx; display: block; float: left; background: #FF6600; margin:32rpx 24rpx 0 0 ;}
.fa_tt{width: auto;height: auto;margin:30rpx 0 0 0rpx;display: block; float: left; font-size: 28rpx; color: #000000;line-height: 32rpx; }	
.fa_tr{width: auto;height: auto;margin:22rpx 0 0 0rpx;display: block; float: right; border: 1px solid #dddddd; border-radius: 25px; }	
.fa_tr text{width: auto;height: auto;display: block; float: left; margin: 7rpx 0 0 16rpx;font-size: 28rpx; color: #000000;line-height: 36rpx; }
.fa_tr image{width: 24rpx; height: 24rpx;display: block; float: left;margin: 13rpx 13rpx 13rpx 13rpx;}
.fa_tl2{background:#256AFF}

.lbj{ width: 100%; height: 200rpx; display: block; float: left; background: #256AFF;}
.fa01{width: 702rpx;height: 200rpx;margin:-150rpx 0 0 24rpx;background: #FFFFFF;box-shadow: 0px 10rpx 30rpx rgba(0, 0, 0, 0.1);border-radius: 12rpx; position: relative; z-index: 9; display: block; float: left;}

.fa011{width: 702rpx;margin:-150rpx 0 0 24rpx;background: #FFFFFF;box-shadow: 0px 10rpx 30rpx rgba(0, 0, 0, 0.1);border-radius: 12rpx; position: relative; z-index: 9; display: block; float: left;}
.fa01_b{width:50%; height: auto; display: block; float: left; box-sizing: border-box; padding:0 0 0 40rpx; margin: 30rpx 0 0 0; border-right:1px solid #DDDDDD ; }
.fa01_b:last-child{ border: 0;}
.fa01_bt{width: 100%; height: auto; line-height: 44rpx; display: block; float: left;text-align: left; font-size: 36rpx; font-weight: 500; color: #FF6600;}
.fa01_b:last-child .fa01_bt{ color: #2DB755;}
.fa01_bc{width: 100%; height: auto; line-height: 32rpx; display: block; float: left;text-align: left; font-size: 24rpx; color: #000000;margin: 10rpx 0 0 0;}
.fa01_bf{width: 100%; height: auto; line-height: 28rpx; display: block; float: left;text-align: left; font-size: 20rpx; color: #3F578C; margin: 20rpx 0 0 0;}
.fa01_bf image{width: 20rpx; height: 20rpx;display: block; float: left;margin: 2rpx 0 0 10rpx;}
.fa01_bf text{width: auto; height: auto;display: block; float: left;}

.tc{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:10000; display: block;}
.jtop_bj{width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index:10000;}
.tc_fbox_bt{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 20rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox{ width: 100%; height: auto; display: block; float: left; background: #F2F2F2; position: fixed; left: 0; bottom: 0; z-index:10001; }
.tc_fbox_bt2{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 0rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox_bt3{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-bottom: 1px solid #DDDDDD; background: #ffffff;}
	
	
.no{ width: 100%; height: auto; display: block; float: left; margin: 240rpx 0 200rpx;}
.no_t{ width: 690rpx; padding:  40rpx 30rpx 30rpx; height: auto; color: #000000;font-size: 32rpx;line-height: 40rpx;display: block;float: left; text-align: center; }
.no_bt{width: 460rpx;
height: 94rpx;
 margin: 50rpx 0 0  130rpx;
 color: #FFFFFF;font-size: 36rpx;line-height: 48rpx;
background: #256AFF;display: block;float: left;
border-radius: 10rpx; text-align: center;}

.no_bt image{width: 48rpx;height: 48rpx;display: block;float: left; margin:20rpx 20rpx 0rpx 124rpx;}
.no_btt{width: auto;height: 48rpx;display: block;float: left; margin:20rpx 0rpx 0rpx 0;line-height: 48rpx;}

.cf{ width: 690rpx; padding:  25rpx 30rpx; height: auto; color: #256AFF;font-size: 32rpx;line-height: 40rpx;display: block;float: left; border-bottom: 1px solid #DDDDDD;}
.ti{ width: 690rpx; padding:  40rpx 30rpx 30rpx; height: auto; color: #000000;font-size: 32rpx;line-height: 40rpx;display: block;float: left; }
.ti image{width: 16rpx;height: 25rpx;display: block;float: right; margin: 10rpx 0rpx 0 30rpx;}
.tt{ width: 690rpx; padding: 0rpx 30rpx 30rpx; height: auto; color: #666666;font-size: 32rpx;line-height: 40rpx;display: block;float: left; }
.tt view{ margin: 0 0 30rpx;}
.tt image{width: 160rpx;height: 160rpx;display: block;float: left; margin: 0rpx 20rpx  20rpx 0;}


.cf_b{ width: 690rpx;height: auto; display: block;float: left; margin: 0 30rpx;}
.cf01{width: 100%; height: auto;  display: block;float: left;color: #000000;font-size: 28rpx;line-height: 36rpx; margin: 20rpx 0;}
.cf02{width: 100%; height: auto;  display: block;float: left;color: #999999;font-size: 24rpx;line-height: 32rpx; margin:0 0 20rpx ;}
.cf03{width: 100rpx; height: auto;  display: block;float: left;color: #000000;font-size: 34rpx;line-height: 32rpx; margin: 40rpx 40rpx 40rpx 0;}
.cf04{ width:500rpx;height: auto; display: block;float: left; margin: 0 0rpx;}
.cf04t{width: 100%; height: auto;  display: block;float: left;color: #000000;font-size: 28rpx;line-height: 36rpx; margin:20rpx 0 10rpx ;}
.cf04f{width: 100%; height: auto;  display: block;float: left;color: #999999;font-size: 24rpx;line-height: 32rpx; margin:0rpx 0 22rpx ;}



	.tophr{ width: 100%; height: 88rpx; }
	.uni-searchbar{box-shadow:none}
	.index{background: #ffffff;width: 100%; height: auto;}
	.jtop{ width: 100%; height: 88rpx; background: #256AFF; position: fixed; top: 0; left: 0; z-index: 1000;}
	.jtop_l{width: auto; height: 88rpx; display: block;float: left; font-size: 32rpx; color: #000000; line-height: 88rpx; margin: 0 0 0 30rpx;}
	.jtop_l image{width: 48rpx; height: 48rpx; display: block;float: left; margin: 20rpx 0 20rpx 0;}
	.jtop_lt{margin: 0 0 0 10rpx;}
	.jtop_r{width: 48rpx; color: #ffffff;text-align: right; height: 48rpx; display: block;float: right; margin: 20rpx 40rpx 0 0;}
	.jtop_rl{margin: 20rpx 30rpx 0 0;}
	.jtop_r image{width: 48rpx; height: 48rpx; display: block;float: left;}
	.jtop_c{width: 70%; height: 48rpx; line-height: 48rpx; display: block;float: left; position: fixed; top: 20rpx; left: 15%; text-align: center; font-size: 36rpx;color: #ffffff;}
	.jtop_c image{width: 36rpx; height: 36rpx; display: inline-block; float: none; margin-bottom: -5rpx; margin-left: 5rpx;}
	.jtop_b{width: 100%; height: auto; background: #ffffff; position: fixed; top:88rpx; left: 0; z-index: 1001;}
	.jtop_c1{ display: inline-block; margin: 0 20rpx; color: #ffffff;}
	.jtop_c1.active{color: #ffffff;}
	

	.ci{width: 690rpx;height: 180rpx;background: #EB5342;box-shadow: 0px 20rpx 30rpx rgba(0, 0, 0, 0.100333);border-radius: 12rpx; margin: 30rpx;}
	.ci_b{width: 33%;height: 72rpx; display: block; float: left; box-sizing: border-box; margin: 57rpx 0 0 0; border-right: 1px solid rgba(255,255,255,.3);}
	.ci_bt{ width: 100%; height: auto; color: #FFFFFF;font-size: 20rpx;line-height: 28rpx;display: block;float: left; margin: 0rpx 0 0rpx 0; text-align: center; }
	.ci_bf{ width: 100%; height: auto; color: #FFFFFF;font-size: 32rpx;line-height: 32rpx;display: block;float: left; margin: 20rpx 0 0rpx 0; text-align: center; }
	.ci .ci_b:last-child{border: 0;}
	
	
	
	.cli{ width: 100%; height: auto; display: block; float: left; margin-top:20rpx; }
	.clb{ width:650rpx; height: auto; display: block; float: left; border-bottom: 1px solid #DDDDDD; margin: 18rpx 0 0 20rpx; }
	.clb:last-child{ border: 0; margin-bottom: 50rpx;}
	.clb image{width: 84rpx;height: 84rpx;display: block;float: left; margin:0rpx 20rpx 18rpx 0rpx;}
	.clb_t{ width: 500rpx; height: auto; display: block; float: left; }
	.clfb_tt{ width: 100%; height: auto; color: #000000;font-size: 34rpx;line-height: 42rpx;display: block;float: left; margin: 0 0 10rpx 0; }
	.clfb_tf{ width: 100%; height: auto; color: #999999;font-size: 24rpx;line-height: 32rpx;display: block;float: left;  }
	.clfb_tt text{float: right; color: #CCCCCC;font-size: 24rpx;line-height: 32rpx;display: none;}
	
	
	
	
		.change{
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 100rpx;
            height: 100rpx;
            color: #b89249;
            background-color: #21191b;
        }
.no{ display: none;}
</style>
